/* Welcome to mixin
 *
 * In this file you should write your Compatible Styles
 *
/**
 * Content Start
 *
 * -o-...............for Opera(Presto内核)
 * -webkit-..........for Safari & Chrome(Webkit内核)
 * -moz-.............for Firefox(Gecko内核)
 * -ms-..............for IE(Trident内核)
 * -khtml-...........for Safari(Webkit内核)
 *
*/
// box-sizing
// -------------------------------
@mixin box-sizing(){
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
// border-radius
// for ie 8 ↓
// -------------------------------
@mixin border-radius($Value){
  border-radius: $Value;
  -moz-border-radius: $Value;
  -webkit-border-radius: $Value;
}
@mixin border-top-left-radius($Value){
  border-top-left-radius: $Value;
  -moz-border-top-left-radius: $Value;
  -webkit-border-top-left-radius: $Value;
}
@mixin border-top-right-radius($Value){
  border-top-right-radius: $Value;
  -moz-border-top-right-radius: $Value;
  -webkit-border-top-right-radius: $Value;
}
@mixin border-bottom-right-radius($Value){
  border-bottom-right-radius: $Value;
  -moz-border-bottom-right-radius: $Value;
  -webkit-border-bottom-right-radius: $Value;
}
@mixin border-bottom-left-radius($Value){
  border-bottom-left-radius: $Value;
  -moz-border-bottom-left-radius: $Value;
  -webkit-border-bottom-left-radius: $Value;
}
// transform
// for ie 8 ↓
// -------------------------------
@mixin transform($Value){
  transform:$Value;
  -ms-transform:$Value;
  -moz-transform:$Value;
  -webkit-transform:$Value;
  -o-transform:$Value;
}
// transition
// for ie 9 ↓
// -------------------------------
@mixin transition($Value){
  transition: $Value;
  -moz-transition: $Value;
  -webkit-transition: $Value;
  -o-transition: $Value;
}
// opacity
// for ie 7 ↓
// -------------------------------
@mixin opacity($Value){
  opacity:$Value;
  filter:alpha(opacity=($Value*100));
  -moz-opacity:$Value;
  -khtml-opacity:$Value;
}
// appearance
// for ie ×
// -------------------------------
@mixin appearance($Value){
  appearance:$Value;
  -moz-appearance:$Value;
  -webkit-appearance:$Value;
}
// box-shadow
// for ie 8 ↓
// -------------------------------
@mixin box-shadow($Value){
  -moz-box-shadow:$Value;
  -webkit-box-shadow:$Value;
  box-shadow:$Value;
}
// animation
// for ie 9 ↓
// -------------------------------
@mixin animation($Value){
  animation:$Value;
  -moz-animation:$Value;
  -webkit-animation:$Value;
  -o-animation:$Value;
}
// display
// -------------------------------
@mixin row(){
  display: -webkit-box!important;
  display: -moz-box!important;
  display: -ms-flexbox!important;
  display: -webkit-flex!important;
  display: flex!important;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
@mixin col(){
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  width: 0;
  -webkit-flex-basis: 0;
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  max-width: 100%;
  display: block;
  padding: 0!important;
  position: relative;
}
@mixin fixed(){
  -webkit-box-flex: 0!important;
  -webkit-flex: none!important;
  -ms-flex: none!important;
  flex: none!important;
  width: auto;
}
@mixin backgroundColor($Value1,$Value2){
  background: -webkit-linear-gradient($Value1, $Value2);
  background: -o-linear-gradient($Value1, $Value2);
  background: -moz-linear-gradient($Value1, $Value2);
  background: linear-gradient($Value1, $Value2);
}